<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple" >
          <el-table :data="shengList" height="600" v-loading="listLoading1" highlight-current-row>
            <el-table-column align="center" label="省">
              <template slot-scope="scope">
                <span>{{scope.row.name}} ({{scope.row.shortName}})</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="openedit(1,scope.row)">编辑</el-button>
                <el-button type="text" @click="openedit(2,{provinceId:scope.row.id})" >新增市</el-button>
                <el-button type="text" @click="loadCity(scope.row)" >下级市</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-table :data="shiList" height="600" v-loading="listLoading2" highlight-current-row>
            <el-table-column align="center" label="市">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="openedit(2,scope.row)">编辑</el-button>
                <el-button type="text" @click="openedit(3,{provinceId:scope.row.provinceId,cityId:scope.row.id})" >新增区</el-button>
                <el-button type="text" @click="loadArea(scope.row)" >下级区</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="grid-content bg-purple">
          <el-table :data="quList" height="600" v-loading="listLoading3" highlight-current-row>
            <el-table-column align="center" label="区">
              <template slot-scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="openedit(3,scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <edit ref="edit" />
  </div>
</template>

<script>
  import apiprovince from "@/api/baseManager/province";
  import edit from './edit'
  export default {
    name: "province",
    components:{edit},
    data() {
      return {
        shengList:[],  
        shiList:[],
        quList:[],
        listLoading1:true,
        listLoading2:false,
        listLoading3:false,
      };
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
       this.listLoading1=true
       apiprovince.getProvinceList().then(res => {
        this.shengList = res.data.list;
        this.listLoading1=false
      })
     },
     //省的下级市
     loadCity(row){
      this.listLoading2=true
      this.shiList = [];
      this.quList = []; 
      apiprovince.getListAllCity({provinceId:row.id}).then(res => {  //获取省级ID
        this.shiList = res.data.list;
        this.listLoading2=false
      })
    },
    //市的下级区
    loadArea(row){
      this.listLoading3=true
      this.quList = [];
      apiprovince.getListAllCounty({cityId:row.id}).then(res => { //获取市ID
        this.quList = res.data.list;
        this.listLoading3=false
      })
    },
    //编辑
    openedit(level, row){
      this.$refs.edit.open(level, row)
    }
  }

};
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background: #fff;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>